<template>
  <div class="pos-fixed" :style="{
    left:`${cusInfo.x}px`,
    top:`${cusInfo.y}px`,
  }" v-if="cusInfo.visibility">
    <div class="">
      <div class="img-box">
        <img class="img-cover" :src="face" alt="">
      </div>
      <div class="name">{{ name }}</div>
      <div class="appearsLabel">
        <span class="label">账号：</span>
        <div class="content">{{userid}}
          <i :class="{
            'fa':true,'fa-fw':true,
            'fa-mars':gender==1,
            'fa-venus':gender==2,
          }"></i>
        </div>
      </div>
      <div class="appearsLabel">
        <span class="label">别称：</span>
        <div class="content">{{ alias }}</div>
      </div>
      <div class="appearsLabel">
        <span class="label">职务：</span>
        <div class="content">{{ position }}</div>
      </div>
      <div class="appearsLabel">
        <span class="label">手机：</span>
        <div class="content">{{ telShow }}</div>
      </div>
      <div class="appearsLabel">
        <span class="label">部门：</span>
        <div class="content">
          <div v-for="(v,k) in departments" :key="k"> {{v}} </div>
        </div>
      </div>
      <div class="appearsLabel">
        <span class="label">外部联系人备注：</span>
        <template v-if="externalUserInfo.length > 0">
          <div v-for="(v,k) in externalUserInfo" :key="k">
            <b>[{{v.externalUser_companyName}}]</b>
            {{$_.get(v,'externalUser_Remark','无')}}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed:{
    ...mapState(['cusInfo','cusInfo.content']),
    telShow:function(){
      if(['高级会员'].includes(this.userClass)){
        return this.tel.replace(/(\d{3})\d+(\d{4})/,'$1*****$2');
      }
      if(['中级会员'].includes(this.userClass)){
        return this.tel.replace(/(\d{3})\d+(\d{4})/,'$1****$2');
      }
      if(['注册会员','初级会员'].includes(this.userClass)){
        return this.tel;
      }
      return '---------';
    }
  },
  watch:{
    "$store.state.cusInfo":{
    deep:true,
      handler:function(nv,ov){
        this.userid = nv.content.userid;
        this.name = nv.content.name;
        this.tel = nv.content.phonenumber;
        this.alias = nv.content.alias;
        this.gender = nv.content.gender;
        this.face = nv.content.thumb_avatar;
        this.departments = nv.content.departments;
        this.externalUserInfo.splice(0,this.externalUserInfo.length);
        _.get(nv.content,'externalUserInfo',[]).forEach((v)=>{
          this.externalUserInfo.push(v)
        })
        this.position = nv.content.position;
        // this.appUserId =  nv.content.appUserId;
        // this.loginCount =  nv.content.loginCount;
        // this.userClass =  ((userClassId)=>{
        //   return {0:'注册会员',3:'初级会员',4:'中级会员',5:'高级会员'}[userClassId]
        // })(nv.content.userClassId);
        // this.userClassId =  nv.content.userClassId;
        this.getUserClass(nv.content.phonenumber)
      }
    }
  },
  data(){
    return {
      isDev:process.env.NODE_ENV == 'development',
      id:'',name:'',tel:'',alias:'',
      gender:'',face:'',
      departments:[],
      externalUserInfo:[],
      position:'',
      appUserId:0,loginCount:0,
      userClass:'',userClassId:0,
    }
  },
  methods:{
    getUserClass:function(tel){
      if(tel == '') {
        this.isDev && this.$message({
          type: 'warning',
          message:`无tel`
        })
        return
      }
      this.$api.fromImGetAppUserInfo({
        phoneNumber: tel
      }).then((res)=>{
        if(res.data.code == 200){
          let data = res.data.data;
          this.appUserId = data.appUserId;
          this.loginCount = data.loginCount;
          this.userClass =  ((userClassId)=>{
            return {0:'注册会员',3:'初级会员',4:'中级会员',5:'高级会员'}[userClassId]
          })(data.userClassId);
          this.userClassId = data.userClassId;
        }
      }).catch((err)=>{})
    }
  },
  mounted:function(){}
}
</script>

<style lang="less" scoped>
.pos-fixed{
  position: fixed;
  min-width:320px;
  padding:8px 16px;
  border-radius: 4px;
  background-color:#fff;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
}
.fa-mars{color:blue;}
.fa-venus{color:red;}
.img-box{
  position: absolute;
  top:0;right:0;
  width:48px;height:48px;
}
.name{
  font-size:18px;
  line-height:30px;
}
.appearsLabel{
  font-size:14px;
  line-height:30px;
  padding-left:3em;
  .label{
    margin-left:-3em;
    color:#999;
  }
  .content{
    display: inline-block;
  }
}
</style>